import { useEffect } from 'react';
import { ArticleModelState, Link, useDispatch, useIntl, useSelector } from 'umi';
import styles from './upperright.less';
import { formatDate } from '@/utils';
import { Spin } from 'antd';

export default function upperginht() {
  const { articleList } = useSelector(
    (state: { article: ArticleModelState }) => state.article,
  );

  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();

  const intl = useIntl();
  useEffect(() => {
    dispatch({
      type: 'article/getArticleList',
    });
  }, []);
  return (
    <div className={styles.upperRight}>
      <div className={styles.upperRightTitle}>
        <span>{intl.formatMessage({id:'recommendToReading'})}</span>
      </div>
      <div className={styles.upperRightUl}>
        <ul>
          {articleList.length > 0 ? (
            articleList.slice(0, 6).map((item) => {
              return (
                <li key={item.id}>
                  <Link to={`/article/${item.id}`} key={item.id}>
                    <span className={styles.firstspan}>{item.title} </span>
                    .
                    <span className={styles.lastspan}>大约{formatDate(item.updateAt)}前</span>
                  </Link>
                </li>
              );
            })
          ) : (
            <Spin/>
          )}
        </ul>
      </div>
    </div>
  );
}
